﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/css/statistic.css">
    <title>后台监测大数据平台</title>
    <script src="/static/lib/jquery-1.9.1.min.js"></script>
    <script src="/static/js/rem.js"></script>
    <script src="/static/lib/echarts.min.js"></script>
    <script src="/static/lib/anhui.js"></script>
    <!-- <script src="./js/"></script> -->
</head>
<style>
    .listOptions{
        width: 96px;
        height: 20px;
        border-radius: 15px;
        overflow: hidden;
        position: absolute;
        top: 0px;
        right: 10px;
        z-index: 9999;
    }
    .list{
        border-right: 1px solid rgb(19, 37, 136);
        border-left: 1px solid rgb(19, 37, 136);
        color: aliceblue;
        font-size: 14px;
        float: left;
        width: 30px;
        height: 100%;
        background-color: rgb(63, 163, 189);
        text-align: center;
        cursor: pointer;
    }
    .listOptions-1{
        width: 126px;
        height: 18px;
        line-height: 18px;
        border-radius: 15px;
        overflow: hidden;
        position: absolute;
        top: 40px;
        right: 300px;
        z-index: 9999;
    }
    .active{
        background-color: red !important;
    }
    .list-1{
        border-right: 1px solid rgb(19, 37, 136);
        border-left: 1px solid rgb(19, 37, 136);
        color: aliceblue;
        font-size: 12px;
        float: left;
        width: 40px;
        height: 100%;
        background-color: rgb(63, 163, 189);
        text-align: center;
        cursor: pointer;
    }
    .more{
        color:  rgb(63, 163, 189);
        position: absolute;
        bottom: 30px;
        left: 10px;
        font-size: 13px;
        cursor: pointer;
    }
    .morelist{
        color:  rgb(63, 163, 189);
        position: absolute;
        bottom: 0px;
        left: 10px;
        font-size: 13px;
        cursor: pointer;
    }
</style>
<body>
    <div class="t_container">
        <header class="t_header">
            <span>设备综合统计平台</span>

        </header>

        <main class="t_main">
            <div class="t_left_box">
                <img class="t_l_line" src="/static/img/left_line.png" alt="">
                <div class="t_mbox t_rbox">
                    <i></i>
                    <span>总订单数</span>
                    <h2 class="totalOrders">18000</h2>
                </div>
                <div class="t_mbox t_gbox">
                    <i></i>
                    <span>总成交订单数</span>
                    <h2 class="totalSalesOrders">1000</h2>
                </div>
                <div class="t_mbox t_ybox">
                    <i></i>
                    <span>总成交金额</span>
                    <h2 class="totalSalesAmount">600</h2>
                </div>
                <img class="t_r_line" src="/static/img/right_line.png" alt="">
            </div>
            <div class="t_center_box">
                <div class="t_top_box">
                    <img class="t_l_line" src="/static/img/left_line.png" alt="">
                    <ul class="t_nav">
                        <li>
                            <span>设备数</span>
                            <h1 class="totalMachines">500</h1>
                            <i></i>
                        </li>
                        <li>
                            <span>总成交商品数</span>
                            <h1 class="totalSalesCommodities">30</h1>
                            <i></i>
                        </li>
                        <li>
                            <span>商品种类</span>
                            <h1 class="totalCommodities">75</h1>
                        </li>
                    </ul>
                    <img class="t_r_line" src="/static/img/right_line.png" alt="">
                </div>
                <div class="t_bottom_box">
                    <img class="t_l_line" src="/static/img/left_line.png" alt="">
                    <div id="chart_3" class="echart" style="width: 100%; height: 3.6rem;"></div>
                    <img class="t_r_line" src="/static/img/right_line.png" alt="">
                </div>
            </div>
            <div class="t_right_box">
                    <img class="t_l_line" src="/static/img/left_line.png" alt="">
                    <div class="listOptions-1">
                        <div class="list-1 active" data-value="6048000">近一周</div>
                        <div class="list-1" data-value="2592000">近一月</div>
                        <div class="list-1" data-value="31104000">近一年</div>
                    </div>
                    <div id="chart_4" class="echart" style="width: 50%; height: 4.6rem; position: absolute;"></div>
                    <a class="more" href="./statisticSrc/goodsSales.html">查看更多>></a>
                    <header class="t_b_h">
                        <span style="cursor: pointer; top: 5%;left: 45%;" >
                            <img src="/static/img/Refresh.png" onclick="window.location.reload()" alt=""/>
                        </span>
                        <h3><span>刷新</span></h3>
                    </header>
                    <main class="t_b_m">
                        <img src="/static/img/map.png" alt="">
                        <div class="t_b_box">
                            <span>溫度</span>
                            <i></i>
                            <h2>23℃</h2>
                        </div>
                        <div class="t_b_box1">
                            <span>湿度</span>
                            <i></i>
                            <h2>56RH</h2>
                        </div>
                        <div class="t_b_box2">
                            <span>信号</span>
                            <i></i>
                            <h2>-90dBm</h2>
                        </div>
                        <div class="t_b_box3">
                            <span>光线</span>
                            <i></i>
                            <h2>250LX</h2>
                        </div>
                    </main>
                    <img class="t_r_line" src="/static/img/right_line.png" alt="">
            </div>
            <div class="b_left_box">
                    <img class="t_l_line" src="/static/img/left_line.png" alt="">
                    <div class="listOptions">
                        <div class="list" data-value="天">天</div>
                        <div class="list" data-value="周">周</div>
                        <div class="list active" data-value="月">月</div>
                    </div>
                    <div id="chart_2" class="echart" style="width: 100%; height: 3.6rem;"></div>
                    <img class="t_r_line" src="/static/img/right_line.png" alt="">
            </div>
            <div class="b_center_box">
                    <img class="t_l_line" src="/static/img/left_line.png" alt="">
                    <div id="chart_1" class="echart" style="width: 100%; height: 3.6rem;"></div>
                    <img class="t_r_line" src="/static/img/right_line.png" alt="">
            </div>
            <div class="b_right_box">
                    <img class="t_l_line" src="/static/img/left_line.png" alt="">
                    <h1 class="t_title">补货列表</h1>
                    <table class="t_table">
                        <thead>
                            <tr>
                                <th>商品</th>
                                <th>价格</th>
                                <th>规格</th>
                                <th>数量</th>  
                            </tr>
                        </thead>
                        <tbody class="tolistinfo">
                            <tr>
                                <td>2018-02-06</td>
                                <td>2018-02-06</td>
                                <td><a href="http://www.bootstrapmb.com/"></a>张伟</td>
                                <td>13111345462</td>
                                <td>1000ml</td>
                            </tr>
                        </tbody>
                    </table>
                    <a href="./statisticSrc/bringList.html" class="morelist">查看更多>></a>
                    <img class="t_r_line" src="/static/img/right_line.png" alt="">
            </div>
        </main>

    </div>
</body>
<script>

    $(function () {
        echart_1();
        echart_2('月');
        echart_3();
        echart_4(Math.round(new Date() / 1000) -6048000,Math.round(new Date() / 1000));
        echart_5()

        $(document).off('click','.list').on("click",".list",function(){
            $(this).addClass('active').siblings('div').removeClass('active')
            var w = $(this).attr('data-value')
            echart_2(w);
        })

        $(document).off('click','.list-1').on("click",".list-1",function(){
            $(this).addClass('active').siblings('div').removeClass('active')
            var w = $(this).attr('data-value')
            var start_time = Math.round(new Date() / 1000) - w
            var end_time = Math.round(new Date() / 1000)
            echart_4(start_time,end_time);
        })
        function echart_1() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_1'));
            $.ajax({
                type: "get",
                url: "/admin/statistic",
                data: "",
                dataType: "json",
                success: function (mag) {
                    var res = mag.data
                    $(".totalOrders").html(res.orderData.totalOrders)
                    $(".totalSalesOrders").html(res.orderData.totalSalesOrders)
                    $(".totalSalesAmount").html(res.orderData.totalSalesAmount)
                    $(".totalMachines").html(res.commodityData.totalMachines)
                    $(".totalSalesCommodities").html(res.commodityData.totalSalesCommodities)
                    $(".totalCommodities").html(res.commodityData.totalCommodities)
                    option = {
                        title: {
                            text: '本月设备状态统计',
                            top: 35,
                            left: 20,
                            textStyle: {
                                fontSize: 18,
                                color: '#fff'
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)",

                        },
                        legend: {
                            right: 20,
                            top: 35,
                            data: ['故障', '正常'],
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        series: [{
                            name: '设备状态',
                            type: 'pie',
                            radius: ['0', '60%'],
                            center: ['50%', '60%'],
                            color: ['#e72325', '#98e002', '#2ca3fd'],
                            label: {
                                normal: {
                                    formatter: '{b}\n{d}%'
                                },

                            },
                            data: [{
                                value: res.machineStatusData.totalMachinesInError ,
                                name: '故障'
                                },
                                {
                                    value: res.machineStatusData.totalMachinesInOperation ,
                                    name: '正常',
                                    selected: true
                                }
                            ]
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。

                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                }
            })
            
            

        }

        function echart_2(num) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_2'));
            $.ajax({
                type: "get",
                url: "/admin/statistic/queryCommoditySalesStatisticInTimeSlot",
                data: {slot:num},
                dataType: "json",
                success: function (res) {
                    var data = {
                        id: 'multipleBarsLines',
                        title: '实时销售统计',
                        legendBar: ['成交订单数', '中立占比', '负面占比'],
                        symbol: '', //数值是否带百分号        --默认为空 ''
                        legendLine: ['成交金额'],
                        xAxis: [
                        res.data[0].month,
                        res.data[1].month,
                        res.data[2].month,
                        res.data[3].month,
                        res.data[4].month,
                        res.data[5].month,
                        ],
                        yAxis: [
                            [
                                res.data[0].salesCount,
                                res.data[1].salesCount,
                                res.data[2].salesCount,
                                res.data[3].salesCount,
                                res.data[4].salesCount,
                                res.data[5].salesCount,
                            ]
                        ],
                        lines: [
                            [
                                res.data[0].salesAmount,
                                res.data[1].salesAmount,
                                res.data[2].salesAmount,
                                res.data[3].salesAmount,
                                res.data[4].salesAmount,
                                res.data[5].salesAmount,
                            ]
                        ],
                        barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数
                        lineColor: ['#D9523F'], // 折线颜色

                    };

                    var myData = (function test() {
                    var yAxis = data.yAxis || [];
                    var lines = data.lines || [];
                    var legendBar = data.legendBar || [];
                    var legendLine = data.legendLine || [];
                    var symbol = data.symbol || ' ';
                    var seriesArr = [];
                    var legendArr = [];
                    yAxis && yAxis.forEach((item, index) => {
                        legendArr.push({
                            name: legendBar && legendBar.length > 0 && legendBar[index]
                        });
                        seriesArr.push({
                            name: legendBar && legendBar.length > 0 && legendBar[index],
                            type: 'bar',
                            barGap: '0.5px',
                            data: item,
                            barWidth: data.barWidth || 12,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{c}' + symbol,
                                    position: 'top',
                                    textStyle: {
                                        color: '#fff',
                                        fontStyle: 'normal',
                                        fontFamily: '微软雅黑',
                                        textAlign: 'left',
                                        fontSize: 11,
                                    },
                                },
                            },
                            itemStyle: { //图形样式
                                normal: {
                                    barBorderRadius: 4,
                                    color: data.barColor[index]
                                },
                            }
                        });
                    });

                    lines && lines.forEach((item, index) => {
                        legendArr.push({
                            name: legendLine && legendLine.length > 0 && legendLine[index]
                        })
                        seriesArr.push({
                            name: legendLine && legendLine.length > 0 && legendLine[index],
                            type: 'line',
                            data: item,
                            itemStyle: {
                                normal: {
                                    color: data.lineColor[index],
                                    lineStyle: {
                                        width: 3,
                                        type: 'solid',
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    show: true, //折线上方label控制显示隐藏
                                    position: 'top',
                                }
                            },
                            symbol: 'circle',
                            symbolSize: 10
                        });
                    });

                    return {
                        seriesArr,
                        legendArr
                    };
                })();

                
                var symbol = data.symbol || ' ';
                option = {
                    title: {
                        show: true,
                        top: '10%',
                        left: '3%',
                        text: data.title,
                        textStyle: {
                            fontSize: 18,
                            color: '#fff'
                        },
                        subtext: data.subTitle,
                        link: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var time = '';
                            var str = '';
                            for (var i of params) {
                                time = i.name.replace(/\n/g, '') + '<br/>';
                                if (i.data == 'null' || i.data == null) {
                                    str += i.seriesName + '：无数据' + '<br/>'
                                } else {
                                    str += i.seriesName + '：' + i.data + symbol + '%<br/>'
                                }

                            }
                            return time + str;
                        },
                        axisPointer: {
                            type: 'none'
                        },
                    },
                    legend: {
                        right: data.legendRight || '30%',
                        top: '12%',
                        right: '5%',
                        itemGap: 16,
                        itemWidth: 10,
                        itemHeight: 10,
                        data: myData.legendArr,
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        }
                    },
                    grid: {
                        x: 30,
                        y: 80,
                        x2: 30,
                        y2: 60,
                    },
                    xAxis: {
                        type: 'category',
                        data: data.xAxis,
                        axisTick: {
                            show: false,
                        },

                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#1AA1FD',
                            },
                            symbol: ['none', 'arrow']
                        },
                        axisLabel: {
                            show: true,
                            interval: '0',
                            textStyle: {
                                lineHeight: 16,
                                padding: [2, 2, 0, 2],
                                height: 50,
                                fontSize: 12,
                            },
                            rich: {
                                Sunny: {
                                    height: 50,
                                    // width: 60,
                                    padding: [0, 5, 0, 5],
                                    align: 'center',
                                },
                            },
                            formatter: function (params, index) {
                                var newParamsName = "";
                                var splitNumber = 5;
                                var paramsNameNumber = params && params.length;
                                if (paramsNameNumber && paramsNameNumber <= 4) {
                                    splitNumber = 4;
                                } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
                                    splitNumber = 4;
                                } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
                                    splitNumber = 5;
                                } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
                                    splitNumber = 5;
                                } else {
                                    params = params && params.slice(0, 15);
                                }

                                var provideNumber = splitNumber; //一行显示几个字
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
                                if (paramsNameNumber > provideNumber) {
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";
                                        var start = p * provideNumber;
                                        var end = start + provideNumber;
                                        if (p == rowNumber - 1) {
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;
                                    }

                                } else {
                                    newParamsName = params;
                                }
                                params = newParamsName;
                                return '{Sunny|' + params + '}';
                            },
                            color: '#1AA1FD',
                        },

                    },
                    yAxis: {
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#1AA1FD',
                            },
                            symbol: ['none', 'arrow']
                        },
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#1AA1FD',
                                type: 'solid'
                            },
                        }
                    },
                    series: myData.seriesArr
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
                }
            })
        }

        function echart_3() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart_3'));

            function showProvince() {
                var geoCoordMap = {
                    '合肥': [117.283042,31.86119]
                };
                var data = [{
                    name: '合肥',
                    value: 100
                }
                ];
                var max = 480,
                    min = 9;
                var maxSize4Pin = 100,
                    minSize4Pin = 20;
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };

                myChart.setOption(option = {
                    title: {
                        text: '设备分布',
                        subtext: '',
                        x: 'center',
                        textStyle: {
                            color: '#FFF'
                        },
                        left: '6%',
                        top: '10%'
                    },
                    legend: {
                        orient: 'vertical',
                        y: 'bottom',
                        x: 'right',
                        data: ['pm2.5'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true,
                        seriesIndex: [1],
                        inRange: {}
                    },
                    geo: {
                        show: true,
                        map: '安徽',
                        mapType: 'anhui',
                        label: {
                            normal: {},
                            //鼠标移入后查看效果
                            emphasis: {
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        //鼠标缩放和平移
                        roam: true,
                        itemStyle: {
                            normal: {
                                //          	color: '#ddd',
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#389BB7',
                                borderWidth: 0
                            }
                        }
                    },
                    series: [{
                        name: 'light',
                        type: 'map',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        itemStyle: {
                            normal: {
                                color: '#F4E925'
                            }
                        }
                    },
                        {
                            name: '点',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            symbol: 'pin',
                            symbolSize: function (val) {
                                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                                var b = minSize4Pin - a * min;
                                b = maxSize4Pin - a * max;
                                return a * val[2] + b;
                            },
                            label: {
                                normal: {
                                    // show: true,
                                    // textStyle: {
                                    //     color: '#fff',
                                    //     fontSize: 9,
                                    // }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F62157', //标志颜色
                                }
                            },
                            zlevel: 6,
                            data: convertData(data),
                        },
                        {
                            name: 'light',
                            type: 'map',
                            mapType: 'hunan',
                            geoIndex: 0,
                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#031525',
                                    borderColor: '#FFFFFF',
                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            animation: false,
                            data: data
                        },
                        {
                            name: ' ',
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            data: convertData(data.sort(function (a, b) {
                                return b.value - a.value;
                            }).slice(0, 5)),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#05C3F9',
                                    shadowBlur: 10,
                                    shadowColor: '#05C3F9'
                                }
                            },
                            zlevel: 1
                        },

                    ]
                });
            }
            showProvince();

            // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }

        function echart_4(start,end) {
            searchVolume(start,end);
            // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option);
            // window.addEventListener("resize", function () {
            //     myChart.resize();
            // });
        }

    });

    function searchVolume(start,end){
        var myChart = echarts.init(document.getElementById('chart_4'));
        $.ajax({
            type: "get",
            url: "/admin/statistic/queryCommoditySalesStatistic",
            data: {start:start,end:end},
            dataType: "json",
            success: function (data) {
                // var data =data.data.commoditySalesVolumeData
                var data =data.data
                
                var titlename = [];
                var cdata = [];
                // data.forEach(element => {
                //     titlename.push(element.commodity_name);
                //     cdata.push(element.count)
                // });
                for (let i = 0; i < 5; i++) {
                    titlename.push(data[i].commodityName);
                    cdata.push(data[i].count)
                }

                var dmax = Math.max(...cdata)
                // console.log(data)
                // 基于准备好的dom，初始化echarts实例
                // var data = [70, 34, 60, 78, 69];
                // var titlename = [y, '2号机', '3号机', '4号机', '5号机'];
                var valdata = [];
                var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
                myChart.setOption({
                    title: {
                        text: '商品畅销榜',
                        x: 'center',
                        textStyle: {
                            color: '#FFF'
                        },
                        left: '6%',
                        top: '10%'
                    },
                    //图标位置
                    grid: {
                        top: '20%',
                        left: '32%'
                    },
                    xAxis: {
                        show: false
                    },
                    yAxis: [{
                        show: true,
                        data: titlename,
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#fff',
                            formatter: (value, index) => {
                                return [

                                    `{lg|${index+1}}  ` + '{title|' + value + '} '
                                ].join('\n')
                            },
                            rich: {
                                lg: {
                                    backgroundColor: '#339911',
                                    color: '#fff',
                                    borderRadius: 15,
                                    // padding: 5,
                                    align: 'center',
                                    width: 15,
                                    height: 15
                                },
                            }
                        },


                    }, {
                        show: true,
                        inverse: true,
                        data: valdata,
                        axisLabel: {
                            textStyle: {
                                fontSize: 12,
                                color: '#fff',
                            },
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },

                    }],
                    series: [{
                        name: '条',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: cdata,
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,
                                color: function(params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex % num]
                                },
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                formatter: '{c}'
                            }
                        },
                    }, {
                        name: '框',
                        type: 'bar',
                        yAxisIndex: 1,
                        barGap: '-100%',
                        data: [dmax, dmax, dmax, dmax, dmax],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: 'none',
                                borderColor: '#00c1de',
                                borderWidth: 3,
                                barBorderRadius: 15,
                            }
                        }
                    }, ]
                })
            }
        });
    }
    function echart_5() {
        $.ajax({
            type: "get",
            //TODO:
            url: "/admin/statistic/queryCommodityToBeDeliver",
            data: '',
            dataType: "json",
            success: function (data) {
                var data = data.data
                console.log(data)
                var tag = ''
                for (let i = 0; i < 5; i++) {
                    var tag1 = '<tr><td>'+ data[i].commodityName +'</td><td>'+ data[i].price +'</td><td>'+ data[i].specifications +'</td><td>'+ data[i].count +'</td></tr>'
                    tag += tag1
                }
                $('.tolistinfo').html(tag)
            }
        })
    }

</script>
</html>
